<template>
  <div class="container_warp g-padding-x">
    <div class="search_wrap">
      <d-search v-model="search" icon-position="left" placeholder="搜索" @keypress.enter="handleConfirm" />
    </div>
    <div class="result_wrap">
      <div class="header_wrap">
        <div :style="{ color: activeName === 'article' ? '#000000' : '' }" class="text_count_wrap mr-[16px]"
          @click="changeTab('article')">
          <strong>文章</strong>
          <span>{{ articleList.length }}</span>
        </div>
        <div :style="{ color: activeName === 'activity' ? '#000000' : '' }" class="text_count_wrap"
          @click="changeTab('activity')">
          <strong>活动</strong>
          <span>{{ activityLive.length }}</span>
        </div>
      </div>

      <div class="content_wrap" v-show="activeName === 'article'">
        <template v-for="item in articlePageList" :key="item.id">
          <GLink :to="`/news/${item.id}`"  target="_blank">
            <Card :tab="activeName" :data="item" />
          </GLink>
        </template>
      </div>
      <div class="content_wrap" v-show="activeName === 'activity'">
        <template v-for="item in activityLivePageList" :key="item.id">
          <GLink :to="`/activity/${item.id}`" target="_blank">
            <Card :tab="activeName" :data="item" />
          </GLink>
        </template>
      </div>
      <EmptyData
        v-show="activeName === 'activity' && !activityLive.length || activeName === 'article' && !articleList.length"
        :hide-icon="false" class="h-full flex-1" />

      <div class="pagination_wrap"
        v-show="activeName === 'activity' && activityLive.length || activeName === 'article' && articleList.length">
        <d-pagination size="sm" @page-index-change="pageChange" :total="pager.total" v-model:pageSize="pager.pageSize"
          v-model:pageIndex="pager.pageIndex" :can-view-total="true" :show-true-page-index="false"
          :can-jump-page="false" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Card from './components/Card.vue'
import type { IResult, ILink, LinkKeys } from './types/index'
import newsData from '../Data/news.json'
import activityData from '../Data/activity.json'

const router = useRouter()
const search = ref<string>(router.currentRoute.value?.query.search as string || '')
const articleList = ref<Array<IResult>>([]) // 文章列表
const activityLive = ref<Array<any>>([]) // 活动列表
const activeName = ref<LinkKeys>(router.currentRoute.value?.query.tab as LinkKeys || 'article')
const articlePageList = ref<Array<IResult>>([]) // 文章分页列表
const activityLivePageList = ref<Array<IResult>>([]) // 文章分页列表

const pager = ref({
  total: 0,
  pageIndex: 1,
  pageSize: 10,
  pageSizeOptions: [10, 20, 30, 40, 50],
});


// 点击tab栏目
function changeTab(tab: LinkKeys) {
  activeName.value = tab
  const linkObj: ILink = {
    'article': articleList.value.length,
    'activity': activityLive.value.length,
  }
  pager.value.total = linkObj[tab]
}

function handleConfirm() {
  getActivityLiveData()
  getArticleListData()
}

// 获取所有的文章列表包括未被收录的
function getArticleListData() {
  articleList.value = Object.values(newsData).flat() as Array<IResult>// 获取所有的文章列表
  if (search.value) {
    let data = articleList.value.filter((res) => res.title.toLowerCase().includes(search.value.toLowerCase()))
    articlePageList.value = data.slice(0, 10)
    articleList.value = data
  } else {
    articlePageList.value = articleList.value.slice(0, 10)
    articleList.value = articleList.value
  }
  pager.value.total = articleList.value.length
}

// 获取所有的文章列表包括未被收录的
function getActivityLiveData() {
  activityLive.value = Object.values(activityData).flat() // 获取所有的文章列表
  if (search.value) {
    let data = activityLive.value.filter((res) => res.title.toLowerCase().includes(search.value.toLowerCase()))
    activityLivePageList.value = data.slice(0, 10)
    activityLive.value = data
  } else {
    activityLivePageList.value = activityLive.value.slice(0, 10)
    activityLive.value = activityLive.value
  }
  pager.value.total = activityLive.value.length
}

//分页函数
function pageChange(index: number) {
  if (activeName.value === 'article') {
    articlePageList.value = articleList.value.slice((index - 1) * 10, index * 10)
  } else {
    activityLivePageList.value = activityLive.value.slice((index - 1) * 10, index * 10)
  }
}

getActivityLiveData()
getArticleListData()

useSeoMeta({
  charset: 'utf-8',
  title: () => `${search.value} - 搜索结果 - GitCode`,
  ogTitle: () => `${search.value} - 搜索结果 - GitCode`,
  description: () => '',
  ogDescription: () => '',
  keywords: () => '',
  ogKeywords: () => ''
})
</script>

<style scoped lang="scss">
.pagination_wrap {
  display: flex;
  justify-content: center;
  margin: 20px;
}

.container_warp {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 500px;
  box-sizing: border-box;

  .search_wrap {
    width: 100%;
    margin: 20px auto;
  }

  .header_wrap {
    display: flex;
    align-items: center;
    padding: 16px;
    width: 100%;
    background: #F9F9FB;
    border: 1px solid #E3E3EE;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;

    .text_count_wrap:first-child {
        margin-right: 20px;
      }
    .text_count_wrap {
    
      cursor: pointer;
      color: #9C9DB4;

      span {
        color: #3B3E55;
        background: #E3E3EE;
        margin-left: 8px;
        text-align: center;
        padding: 0 4px;
        border-radius: 4px;
      }
    }
  }
}


@media screen and (max-width: 768px) {
  .container_warp {
    .header_wrap {
      padding: 10px;
      .text_count_wrap {
        margin: 0 10px;
      }
    }
  }

}
</style>
